import React, { useState, useRef } from 'react';
import './app.css'; // 确保包含适当的 CSS
import Mnav from '../marke/mnav'
import MaTu from '../marke/maTu';
const events = [
    { title: '中秋节', time: '2024-09-17', day: '5', imgSrc: 'https://js.ibaotu.com/act/24/07/18/6698890e795ed.jpg', label1: '中秋H5', label2: '共377个作品' },
    { title: '九一八事变纪念日', time: '2024-09-18', day: '6', imgSrc: 'https://example.com/img1.jpg', label1: '九一八', label2: '共200个作品' },
    { title: '全国爱牙日', time: '2024-09-20', day: '8', imgSrc: 'https://example.com/img2.jpg', label1: '爱牙日', label2: '共150个作品' },
    { title: '秋分', time: '2024-09-22', day: '10', imgSrc: 'https://example.com/img3.jpg', label1: '秋分', label2: '共180个作品' },
    { title: '金秋九月', time: '2024-09-27', day: '15', imgSrc: 'https://example.com/img4.jpg', label1: '金秋九月', label2: '共210个作品' },
    { title: '国庆75周年', time: '2024-10-01', day: '19', imgSrc: 'https://example.com/img5.jpg', label1: '国庆75周年', label2: '共250个作品' },
];

const App = () => {
    const [selectedIndex, setSelectedIndex] = useState(0);
    const navRef = useRef(null);

    const handleNavClick = (index) => {
        setSelectedIndex(index);
        if (navRef.current) {
            navRef.current.scrollTo({ left: index * 100, behavior: 'smooth' });
        }
    };

    const handleArrowClick = (direction) => {
        if (navRef.current) {
            const newIndex = Math.max(0, Math.min(events.length - 1, selectedIndex + direction));
            setSelectedIndex(newIndex);
            navRef.current.scrollTo({ left: newIndex * 100, behavior: 'smooth' });
        }
    };

    return (
        <div className="app">
            2222222
             <div className="mark_nav">
                <ul ref={navRef}>
                    {events.map((event, index) => (
                        <li
                            key={index}
                            className={selectedIndex === index ? 'highlight' : ''} // 根据选中项添加高亮样式
                            onClick={() => handleNavClick(index)} // 点击项时更新选中项
                        >
                            <Mnav title={event.title} time={event.time} day={event.day} />
                        </li>
                    ))}
                </ul>
                <button className='jian_left' onClick={() => handleArrowClick(-1)}>&lt;</button> {/* 向左滑动 */}
                <button className='jian_right' onClick={() => handleArrowClick(1)}>&gt;</button> {/* 向右滑动 */}
            </div>
            {/* <div className="mark_nav">
                <ul ref={navRef}>
                    {events.map((event, index) => (
                        <li
                            key={index}
                            className={selectedIndex === index ? 'highlight' : ''}
                            onClick={() => handleNavClick(index)}
                        >
                            <Mnav title={event.title} time={event.time} day={event.day} />
                        </li>
                    ))}
                </ul>
                <button className='jian_left' onClick={() => handleArrowClick(-1)}>&lt;</button>
                <button className='jian_right' onClick={() => handleArrowClick(1)}>&gt;</button>
            </div> */}
            <div className='mark_img'>
                <MaTu imgSrc1={events[selectedIndex].imgSrc} lable11={events[selectedIndex].label1} lable12={events[selectedIndex].label2} />
            </div>
        </div>
    );
};

export default App;
